<template>
  <div>
    <cus-modal
      ref="modal"
      :title="form.materialName + ' - 指定食材营养匹配/食物成分表'"
      @on-visible-change="onVisibleChange"
      width="1000"
      @onOk="onOk"
      cancelBtnName="关闭"
      :showOkBtn="false"
    >
      <Spin fix v-if="loading"></Spin>
      <div class="contentBox">
        <div class="contentBox-left">
          <div style="width: 280px">
            <div style="margin-bottom: 10px">已匹配营养的类似食材列表</div>
            <Form ref="formValidate" :model="form">
              <FormItem label="" prop="searchMaterialName" :label-width="0">
                <Input
                  v-model="form.searchMaterialName"
                  maxlength="20"
                  clearable
                  placeholder="搜索已匹配食材"
                  style="width: 200px"
                >
                </Input>
              </FormItem>
              <cusButton type="primary" @onClick="theMatchingFoodListApi()"
                >查询</cusButton
              >
            </Form>
            <div class="contentBox-left-topBox" id="theMatchingFoodListList">
              <div
                v-for="(item, index) in theMatchingFoodListList"
                :key="index"
                :class="
                  selectLeftItem &&
                  selectLeftItem.materialCode &&
                  selectLeftItem.materialCode == item.materialCode
                    ? 'selecteft'
                    : ''
                "
                class="itemBox"
                @click="selectLeftBtn(item, 0)"
              >
                {{ item.foodName }}
              </div>
            </div>
            <div style="height: 32px; line-height: 32px">
              食物成分表中名称类似食材列表
            </div>
            <div
              class="contentBox-left-bottomBox"
              id="selectMatchingNutritionDtlAndBudgeteList"
            >
              <div
                v-for="(
                  item, index
                ) in selectMatchingNutritionDtlAndBudgeteList"
                :key="index"
                :class="
                  selectLeftItem &&
                  selectLeftItem.id &&
                  selectLeftItem.id == item.id
                    ? 'selecteft'
                    : ''
                "
                class="itemBox"
                @click="selectLeftBtn(item, 1)"
              >
                {{ item.nutritionName }}
              </div>
            </div>
          </div>
        </div>
        <div class="contentBox-center">
          <div style="width: 280px">
            <div style="margin-bottom: 10px">食材标准名列表</div>
            <Form ref="formValidate" :model="form">
              <FormItem label="" prop="nutritionName" :label-width="0">
                <Input
                  v-model="form.nutritionName"
                  maxlength="20"
                  clearable
                  placeholder="搜索标准名"
                  style="width: 200px"
                >
                </Input>
              </FormItem>
              <cusButton type="primary" @onClick="selectAllNutritionApi()"
                >查询</cusButton
              >
            </Form>
            <div
              class="contentBox-left-topBox"
              style="height: 512px"
              id="selectAllNutritionList"
            >
              <div
                v-for="(item, index) in selectAllNutritionList"
                :key="index"
                class="itemBox"
                :class="
                  selectNurItem &&
                  selectNurItem.id &&
                  selectNurItem.id == item.id &&
                  selectNur == 1
                    ? 'selecteft'
                    : ''
                "
                @click="selectNurBtn(item, 1)"
              >
                {{ item.nutritionName }}
              </div>
            </div>
          </div>
        </div>
        <div class="contentBox-right">
          <div style="width: 280px">
            <div style="margin-bottom: 10px">概算营养匹配列表</div>
            <Form ref="formValidate" :model="form">
              <FormItem label="" prop="nutritionName2" :label-width="0">
                <Input
                  v-model="form.nutritionName2"
                  maxlength="20"
                  clearable
                  placeholder="搜索概算营养"
                  style="width: 200px"
                >
                </Input>
              </FormItem>
              <cusButton type="primary" @onClick="selectAllNutritionBudgetApi()"
                >查询</cusButton
              >
            </Form>
            <div
              class="contentBox-left-topBox"
              style="height: 512px"
              id="selectAllNutritionBudgetList"
            >
              <div
                v-for="(item, index) in selectAllNutritionBudgetList"
                :key="index"
                class="itemBox"
                :class="
                  selectNurItem &&
                  selectNurItem.id &&
                  selectNurItem.id == item.id &&
                  selectNur == 2
                    ? 'selecteft'
                    : ''
                "
                @click="selectNurBtn(item, 2)"
              >
                {{ item.nutritionName }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bBox">
        <div class="chooseItem">
          当前食材: {{ selectItem ? selectItem.materialName : "" }}
        </div>
        <Icon type="md-infinite" size="20" style="padding: 0 5px" />
        <div class="chooseItem" style="margin-right: 40px">
          所选营养:
          {{ selectNurItem ? selectNurItem.nutritionName : "暂未选择" }}
        </div>
        <Button type="primary" @click="goCheck()">匹配</Button>
      </div>
    </cus-modal>
  </div>
</template>

<script>
import {
  selectAllNutrition,
  selectAllNutritionBudget,
  theMatchingFoodList,
  selectMatchingNutritionDtlAndBudgete,
  matchingFoodNutrition,
} from "@/api/organ/dishesModule";

const form = {
  type: 0, // 匹配类型
  mealMaterialName: "", // 食谱原料名
  materialName: "", // 商品名称
  nutritionName: "", // 食材标准名
  nutritionName2: "", // 搜索概算营养
  searchMaterialName: "", // 搜索食材名称
  foodName: "", // 食材名称
};

export default {
  data() {
    return {
      form: form,
      loading: false,
      selectItem: null,
      selectNurItem: null,
      selectNur: null,
      selectLeftItem: null,
      selectAllNutritionList: [],
      selectAllNutritionBudgetList: [],
      theMatchingFoodListList: [],
      selectMatchingNutritionDtlAndBudgeteList: [],
    };
  },
  mounted() {
    this.form = this.$cu.deepClone(form);
  },
  methods: {
    onVisibleChange(v) {
      if (!v) {
        this.form = this.$cu.deepClone(form);
        this.selectItem = null;
        this.selectNurItem = null;
        this.selectLeftItem = null;
        this.selectNur = null;
      }
    },
    show() {
      this.$refs["modal"].show = true;
      console.log(this.form);
      this.selectAllNutritionApi(); // 食材标准名列表
      this.selectAllNutritionBudgetApi(); // 概算营养匹配列表
      this.theMatchingFoodListApi(); // 已匹配营养的类似食材列表
      this.selectMatchingNutritionDtlAndBudgeteApi(); // 食物成分表中名称类似食材列表
    },
    onOk() {
      if (this.step == 1) {
        this.step = 2;
      }
      this.selectProductMaterialListApi();
    },
    // 选中营养
    selectNurBtn(item, type) {
      this.selectNur = type;
      this.selectNurItem = item;
      this.selectLeftItem = null;
    },
    // 左侧选中
    selectLeftBtn(row, type) {
      this.selectLeftItem = row;
      let yinId =
        type == 0 ? this.selectLeftItem.nutritionId : this.selectLeftItem.id;
      this.selectNurItem = null;
      this.selectNur = 1;
      // 轮询 - 食材标准名列表
      this.selectAllNutritionList.map((item, index) => {
        if (item.id == yinId) {
          this.selectNurItem = item;
          this.scrollView(index, "selectAllNutritionList");
        }
      });
    },
    // 食材标准名列表
    selectAllNutritionApi() {
      this.loading = true;
      return new Promise((resolve) => {
        selectAllNutrition({
          nutritionName: this.form.nutritionName,
        }).then((res) => {
          this.loading = false;
          if (res.code === 1) {
            this.selectAllNutritionList = res.data;
            resolve();
          }
        });
      });
    },
    // 概算营养匹配列表
    selectAllNutritionBudgetApi() {
      return new Promise((resolve) => {
        selectAllNutritionBudget({
          nutritionName: this.form.nutritionName2,
        }).then((res) => {
          if (res.code === 1) {
            this.selectAllNutritionBudgetList = res.data;
            resolve();
          }
        });
      });
    },
    // 已匹配营养的类似食材列表
    theMatchingFoodListApi() {
      return new Promise((resolve) => {
        theMatchingFoodList({
          materialName: this.form.searchMaterialName,
          kitchenArea: this.form.kitchenArea
        }).then((res) => {
          if (res.code === 1) {
            this.theMatchingFoodListList = res.data;
            resolve();
          }
        });
      });
    },
    // -食物成分表中名称类似食材列表
    selectMatchingNutritionDtlAndBudgeteApi() {
      return new Promise((resolve) => {
        selectMatchingNutritionDtlAndBudgete({
          foodName: this.form.materialName,
        }).then((res) => {
          if (res.code === 1) {
            this.selectMatchingNutritionDtlAndBudgeteList = res.data;
            resolve();
          }
        });
      });
    },
    // 匹配确认
    goCheck() {
      if (!this.selectItem) {
        this.$Message.warning("请先选择您要进行匹配的食材");
        return;
      }
      if (!this.selectNurItem) {
        this.$Message.warning("请先选择您要匹配的营养");
        return;
      }
      this.matchingFoodNutritionApi();
    },
    // 绑定
    matchingFoodNutritionApi() {
      this.loading = true;
      return new Promise((resolve) => {
        matchingFoodNutrition({
          materialId: this.selectItem.materialId,
          nutritionId: this.selectNurItem.id,
          nutritionName: this.selectNurItem.nutritionName,
          nutritionType: this.selectNurItem.nutritionType,
        }).then((res) => {
          this.loading = false;
          if (res.code === 1) {
            this.$Message.success("匹配营养成功.");
            resolve();
          }
        });
      });
    },
    // 滚动到对应的位置
    scrollView(index, name) {
      setTimeout(() => {
        let list = document.getElementById(name);
        list.scrollTop = index * 38;
      }, 200);
    },
  },
};
</script>

<style scoped>
/deep/.ivu-select-multiple .ivu-select-selection .ivu-select-placeholder {
  /* height: 40px !important; */
  height: auto !important;
  line-height: 40px !important;
}
/deep/.ivu-select-selection {
  height: auto !important;
  min-height: 40px !important;
  border-radius: 2px !important;
}
/deep/.ivu-table-cell {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/deep/.ivu-table td {
  position: relative !important;
}
</style>

<style scoped lang="less">
/*里面的代码可以根据自己需求去进行更改*/
/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width: 4px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(255, 255, 255, 0.4);
}
.contentBox {
  display: flex;
  justify-content: space-between;
  &-left {
    &-topBox {
      height: 240px;
      overflow: hidden;
      overflow-y: auto;
      border: 1px solid #e3e8ee;
      border-radius: 3px;
    }
    &-bottomBox {
      height: 240px;
      overflow: hidden;
      overflow-y: auto;
      border: 1px solid #e3e8ee;
      border-radius: 3px;
    }
  }
  &-center {
    display: flex;
    align-items: center;
    padding: 0 40px;
  }
}

.selecteft {
  color: #1890ff;
  background: #e5f6ff;
  border-left: 2px solid #1890ff !important;
}

.itemBox {
  // padding: 8px 16px;
  height: 38px;
  line-height: 38px;
  padding-left: 8px;
  overflow: hidden;
  border-left: 2px solid rgba(255, 255, 255, 0);
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
}

.chooseItem {
  line-height: 22px;
  padding: 5px 8px;
  border: 1px solid #e3e8ee;
  border-radius: 3px;
  background: white;
  text-align: center;
  word-break: break-all;
  font-size: 12px;
  min-width: 120px;
  min-height: 34px;
}

.bBox {
  margin-top: 20px;
  padding: 0 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
